/*
 * @Description: 父级路由 - 首页
 * @Author: Yong
 * @Date: 2021-09-23 10:34:39
 * @LastEditTime: 2021-09-28 10:18:51
 */
import React, { lazy } from 'react'
// 导入路由
import { Route } from 'react-router-dom'
// 导入 TabBar
import { TabBar } from 'antd-mobile'
// 导入组件自己的样式文件
import './index.scss'
// 导入TabBar菜单的组件
import Index from '../Index'
// 懒加载组件
const News = lazy(() => import('../News'))
const HouseList = lazy(() => import('../HouseList'))
const ProFile = lazy(() => import('../ProFile'))

// TabBar 数据
const tabItems = [
    {
        title: '首页',
        icon: 'icon-ind',
        path: '/home'
    },
    {
        title: '找房',
        icon: 'icon-findHouse',
        path: '/home/list'
    },
    {
        title: '资讯',
        icon: 'icon-infom',
        path: '/home/news'
    },
    {
        title: '我的',
        icon: 'icon-my',
        path: '/home/profile'
    }
]
export default class Home extends React.Component {
    state = {
        // 默认选中的TabBar菜单项
        selectedTab: this.props.location.pathname
    }

    // 组件接收到新的props（此处，实际上是路由信息）就会触发该钩子函数
    componentDidUpdate (prevProps) {
        // prevProps 上一次的props，此处也就是上一次的路由信息
        // this.props 当前最新的props，此处也就是最新的路由信息
        // 注意：在该钩子函数中更新状态时，一定要在 条件判断 中进行，否则会造成递归更新的问题
        if (prevProps.location.pathname !== this.props.location.pathname) {
            // 此时，就说明路由发生切换了
            this.setState({
                selectedTab: this.props.location.pathname
            })
        }
    }

    // 渲染 TabBar.Item
    renderTabBarItem () {
        return tabItems.map(item => (
            <TabBar.Item
                title={item.title}
                key={item.title}
                icon={<i className={`iconfont ${item.icon}`} />}
                selectedIcon={<i className={`iconfont ${item.icon}`} />}
                selected={this.state.selectedTab === item.path}
                onPress={() => {
                    this.setState({ selectedTab: item.path })
                    // 路由切换
                    this.props.history.push(item.path)
                }}
            />
        ))
    }

    render () {
        // console.log(this.props.location.pathname)
        return (
            <div className="home">
                {/* 2.3 渲染子路由 */}
                <Route path="/home/news" component={News} />
                <Route exact path="/home" component={Index} />
                <Route path="/home/list" component={HouseList} />
                <Route path="/home/profile" component={ProFile} />
                {/* TabBar */}

                <TabBar tintColor="#21b97a" noRenderContent={true} barTintColor="white">
                    {this.renderTabBarItem()}
                </TabBar>
            </div>
        )
    }
}
